<template>
	<view class="p-10">
		<view class="bg-white p-5">
			<u-tabs lineColor="#2172FC" :current="currentKey" :list="[{name: '车辆信息'},{name: '车辆状态'},{name: '车辆视频'}]" lineWidth="60" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @change="selectChange"></u-tabs>
		</view>
		<view class="" v-if="currentKey == 2">
			<video class="m-t-10" style="width: 100%;" id="myVideo" show-fullscreen-btn autoplay object-fit="contain" :direction="90" :show-play-btn="false" :show-center-play-btn="false" :enable-progress-gesture="false"
				play-strategy="1" :src="playUrl"></video>
			<view class="m-t-5">
				<uni-section type="line" title="监控设备列表"></uni-section>
				<u-line></u-line>
				<view class="bg-white p-10">
					<view class="flex p-10 m-t-10 s-center m-between" style="background: #F1F6FC;" v-for="(item,index) in list2">
						<view class="flex s-center">
							<image src="/static/img/video.png" mode="" style="width: 24px;height: 24px;"></image>
							<text class="m-l-5">{{item.name}}</text>
						</view>
						<view class=""> 状态:<text class="m-l-5" :style="{color: '#00B578'}">在线</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white m-t-10" v-else>
			<u-cell-group>
				<u-cell :title="item.name" :border="false" :value="item.value" v-for="(item,index) in (currentKey == 0 ? list : list1)">
					<template #value v-if="['故障状态', '预警状态', '运行状态', '铲齿健康状态'].includes(item.name)">
						<text :style="{color: '#00B578'}">{{item.value}}</text>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script setup>
	let currentKey = ref(0)
	let list = ref([{
			name: '车牌号',
			value: '新A523666'
		}, {
			name: '名称',
			value: '王勇的车'
		}, {
			name: '类型',
			value: '内部'
		}, {
			name: '故障次数',
			value: '17'
		}, {
			name: '故障状态',
			value: '正常'
		}, {
			name: '预警次数',
			value: '12'
		}, {
			name: '预警状态',
			value: '正常'
		}]),
		list1 = ref([{
			name: '运行状态',
			value: '正常'
		}, {
			name: '胎压',
			value: '12Kpa'
		}, {
			name: '油量',
			value: '120L'
		}, {
			name: '当日油耗',
			value: '17L'
		}, {
			name: '油缸温度',
			value: '50°'
		}, {
			name: '铲齿健康状态',
			value: '正常'
		}, {
			name: '速度',
			value: '22km/h'
		}, {
			name: '经度',
			value: '22'
		}, {
			name: '维度',
			value: '22'
		}]),
		list2 = ref([{
			name: '视频设备名称1'
		}, {
			name: '视频设备名称2'
		}, {
			name: '视频设备名称3'
		}, {
			name: '视频设备名称4'
		}])
	const selectChange = ({
		index
	}) => {
		currentKey.value = index
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-scroll-view-content uni-view) {
		flex-grow: 1;
	}
</style>